<!-- 系统系统参数 -->
<template>
  <div class="">
    <!-- <el-card> -->
    <el-tabs type="border-card" v-model="activeName1" @tab-click="handleClick">
      <el-tab-pane label="大屏一" name="1">
        <el-row style="margin-bottom: 5px">
          <el-col :span="24">
            <el-button type="primary" @click="addMenu" size="mini" v-has="'add'"
              >添加</el-button
            >
            <el-button
              type="primary"
              @click="GoMonitor(activeName1)"
              size="mini"
              >预览</el-button
            >
          </el-col>
        </el-row>
        <yg-table
          :columns="columns"
          :tableList="TableList"
          :handleCellStyle="handleCellStyle"
        >
          <el-table-column slot="action" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-tooltip content="编辑菜单" placement="top" effect="light">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editConfig(scope.row)"
                  size="mini"
                  v-has="'edit'"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除菜单" placement="top" effect="light">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteMenu(scope.row)"
                  size="mini"
                  v-has="'del'"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑大屏" placement="top" effect="light">
                <el-button
                  type="warning"
                  icon="el-icon-s-platform"
                  circle
                  @click="MenuConfig(scope.row)"
                  size="mini"
                  v-has="'editview'"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </yg-table>
      </el-tab-pane>
      <el-tab-pane label="大屏二" name="2">
        <el-row style="margin-bottom: 5px">
          <el-col :span="24">
            <el-button type="primary" @click="addMenu" size="mini" v-has="'add'"
              >添加</el-button
            >
            <el-button
              type="primary"
              @click="GoMonitor(activeName1)"
              size="mini"
              >预览</el-button
            >
          </el-col>
        </el-row>
        <yg-table
          :columns="columns"
          :tableList="TableList"
          :handleCellStyle="handleCellStyle"
        >
          <el-table-column slot="action" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-tooltip content="编辑菜单" placement="top" effect="light">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editConfig(scope.row)"
                  size="mini"
                  v-has="'edit'"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除菜单" placement="top" effect="light">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteMenu(scope.row)"
                  size="mini"
                  v-has="'del'"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑大屏" placement="top" effect="light">
                <el-button
                  type="warning"
                  icon="el-icon-s-platform"
                  circle
                  @click="MenuConfig(scope.row)"
                  size="mini"
                  v-has="'editview'"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </yg-table>
      </el-tab-pane>
      <el-tab-pane label="大屏三" name="3">
        <el-row style="margin-bottom: 5px">
          <el-col :span="24">
            <el-button type="primary" @click="addMenu" size="mini" v-has="'add'"
              >添加</el-button
            >
            <el-button
              type="primary"
              @click="GoMonitor(activeName1)"
              size="mini"
              >预览</el-button
            >
          </el-col>
        </el-row>
        <yg-table
          :columns="columns"
          :tableList="TableList"
          :handleCellStyle="handleCellStyle"
        >
          <el-table-column slot="action" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-tooltip content="编辑菜单" placement="top" effect="light">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editConfig(scope.row)"
                  size="mini"
                  v-has="'edit'"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除菜单" placement="top" effect="light">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteMenu(scope.row)"
                  size="mini"
                  v-has="'del'"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑大屏" placement="top" effect="light">
                <el-button
                  type="warning"
                  icon="el-icon-s-platform"
                  circle
                  @click="MenuConfig(scope.row)"
                  size="mini"
                  v-has="'editview'"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </yg-table>
      </el-tab-pane>
      <el-tab-pane label="大屏四" name="4">
        <el-row style="margin-bottom: 5px">
          <el-col :span="24">
            <el-button type="primary" @click="addMenu" size="mini" v-has="'add'"
              >添加</el-button
            >
            <el-button
              type="primary"
              @click="GoMonitor(activeName1)"
              size="mini"
              >预览</el-button
            >
          </el-col>
        </el-row>
        <yg-table
          :columns="columns"
          :tableList="TableList"
          :handleCellStyle="handleCellStyle"
        >
          <el-table-column slot="action" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-tooltip content="编辑菜单" placement="top" effect="light">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editConfig(scope.row)"
                  size="mini"
                  v-has="'edit'"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除菜单" placement="top" effect="light">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteMenu(scope.row)"
                  size="mini"
                  v-has="'del'"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑大屏" placement="top" effect="light">
                <el-button
                  type="warning"
                  icon="el-icon-s-platform"
                  circle
                  @click="MenuConfig(scope.row)"
                  size="mini"
                  v-has="'editview'"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </yg-table>
      </el-tab-pane>
    </el-tabs>

    <!-- </el-card> -->
    <!-- 添加菜单弹窗 -->
    <el-dialog
      title="添加菜单"
      :visible.sync="addMenuDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      @close="addMenuDialogClose"
    >
      <yg-from
        ref="addMenuForm"
        :formObj="addMenuFromObj"
        :formData="addMenuFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addMenuDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="addMenuConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改系统参数信息 -->
    <el-dialog
      title="修改系统参数"
      :visible.sync="editConfigDialogVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="editConfigForm"
        :formObj="editMenuFromObj"
        :formData="editMenuFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editConfigDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="editConfigConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  name: "ParamConfig",
  components: {
    YgTable,
    YgFrom,
  },
  props: {
    activeName: {
      type: String,
      require: true,
    },
  },
  data() {
    //这里存放数据
    return {
      addMenuDialogVisible: false, //添加菜单
      editConfigDialogVisible: false, //修改系统参数信息
      activeName1: "1",
      columns: [
        {
          prop: "id",
          label: "菜单id",
          align: "left",
        },
        // {
        //   prop: "parentId",
        //   label: "父菜单id",
        //   align: "left",
        // },
        {
          prop: "type",
          label: "类型",
          formatter(row) {
            if (row.hasOwnProperty("type")) {
              return row.type == 0 ? "主菜单" : "子菜单";
            } else {
              return "";
            }
          },
        },
        {
          prop: "name",
          label: "菜单名",
          align: "left",
        },
        {
          prop: "sortNum",
          label: "排序",
        },
        { slot: "action" },
      ],
      TableList: [],
      addMenuFromObj: [
        {
          input: true, //是input
          label: "数据ID", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据ID",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入数据ID",
            },
          ],
        },
        {
          input: true, //是input
          label: "大屏ID", //字段
          prop: "dashboard", //字段名
          width: 12, //参考el-col
          placeholder: "请输入大屏ID",
          disabled: true, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入大屏ID",
            },
          ],
        },
        {
          select: true, //是input
          label: "菜单类型", //字段
          prop: "type", //字段名
          width: 12, //参考el-col
          placeholder: "请输入菜单类型",
          disabled: false, //是否禁用
          clearable: false, //是否清空
          labelWidth: "80px",
          options: [
            { label: "主菜单", value: 0 },
            { label: "子菜单", value: 1 },
          ],
        },
        {
          input: true, //是input
          label: "菜单名", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入菜单名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          select: true, //是input
          label: "父菜单", //字段
          prop: "parentId", //字段名
          width: 12, //参考el-col
          placeholder: "请输入父菜单ID",
          disabled: false, //是否禁用
          clearable: false, //是否清空
          labelWidth: "80px",
          options: [],
        },
        {
          input: true, //是input
          label: "排序号", //字段
          prop: "sortNum", //字段名
          width: 12, //参考el-col
          placeholder: "请输入排序号",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
      ],
      addMenuFromData: {
        id: "",
        dashboard: this.activeName,
        parentId: "",
        name: "",
        type: "",
        sortNum: "",
      },
      editMenuFromObj: [
        {
          input: true, //是input
          label: "数据ID", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据ID",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "大屏ID", //字段
          prop: "dashboard", //字段名
          width: 12, //参考el-col
          placeholder: "请输入大屏ID",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
        {
          select: true, //是input
          label: "类型", //字段
          prop: "type", //字段名
          width: 12, //参考el-col
          placeholder: "请输入菜单类型",
          disabled: false, //是否禁用
          clearable: false, //是否清空
          labelWidth: "80px",
          options: [
            { label: "主菜单", value: 0 },
            { label: "子菜单", value: 1 },
          ],
        },
        {
          input: true, //是input
          label: "菜单名", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入菜单名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          select: true, //是input
          label: "父菜单", //字段
          prop: "parentId", //字段名
          width: 12, //参考el-col
          placeholder: "请输入父菜单ID",
          disabled: false, //是否禁用
          clearable: false, //是否清空
          labelWidth: "80px",
          options: [],
        },
        {
          input: true, //是input
          label: "排序号", //字段
          prop: "sortNum", //字段名
          width: 12, //参考el-col
          placeholder: "请输入排序号",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
      ],
      editMenuFromData: {
        id: "",
        dashboard: this.activeName,
        parentId: "",
        name: "",
        type: "",
        sortNum: "",
      },
      parentArray: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    activeName1: {
      handler(newVal, oldVal) {
        this.addMenuFromData.dashboard = newVal;
        this.editMenuFromData.dashboard = newVal;
        // let newMsg = {
        //   webMsgType: 1022,
        //   funCode: 0,
        // };
        // let dashboard = Number(newVal);
        // newMsg.data = { dashboard: dashboard, withPageConfig: false };
        // console.log(newMsg);
        // publishMsg(newMsg);
      },
      // immediate: true,
    },
  },
  //方法集合
  methods: {
    handleClick(tab) {
      this.activeName1 = tab.name;
      this.getMenulist(tab.name);
    },
    getMenulist(index) {
      let newMsg = {
        webMsgType: 1022,
        funCode: 0,
      };
      let dashboard = Number(index);
      newMsg.data = { dashboard: dashboard, withPageConfig: false };
      console.log(newMsg);
      publishMsg(newMsg);
    },
    editConfig(val) {
      this.editConfigDialogVisible = true;
      this.editMenuFromData.id = val.id;
      this.editMenuFromData.parentId = val.parentId;
      this.editMenuFromData.name = val.name;
      this.editMenuFromData.type = val.type;
      this.editMenuFromData.sortNum = val.sortNum;
    },
    deleteMenu(id) {
      //console.log("删除系统参数", id);
      this.$confirm(
        `将要删除id为:${id.id}的菜单吗？是否确定删除?`,
        "删除Topic",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let newMsg = {
            webMsgType: 1022,
            funCode: 3,
          };
          newMsg.data = { id: id.id };
          publishMsg(newMsg);
          // this.$message({
          //   type: "success",
          //   message: "删除Topic成功!",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加菜单
    addMenu() {
      this.addMenuDialogVisible = true;
    },
    //添加菜单确认按钮
    addMenuConfirm() {
      if (this.$refs.addMenuForm.submitForm()) {
        let newMsg = {
          webMsgType: 1022,
          funCode: 1,
        };
        let num = Number(this.addMenuFromData.type);
        let num1 = Number(this.addMenuFromData.sortNum);
        let num2 = Number(this.addMenuFromData.dashboard);
        this.addMenuFromData.type = num;
        this.addMenuFromData.sortNum = num1;
        this.addMenuFromData.dashboard = num2;
        newMsg.data = this.addMenuFromData;
        publishMsg(newMsg);
        this.addMenuDialogVisible = false;
      }
    },
    addMenuDialogClose() {
      this.$refs.addMenuForm.resetForm();
    },
    editConfigConfirm() {
      if (this.$refs.editConfigForm.submitForm()) {
        let newMsg = {
          webMsgType: 1022,
          funCode: 2,
        };
        let num = Number(this.editMenuFromData.type);
        let num1 = Number(this.editMenuFromData.sortNum);
        let num2 = Number(this.editMenuFromData.dashboard);
        this.editMenuFromData.type = num;
        this.editMenuFromData.sortNum = num1;
        this.editMenuFromData.dashboard = num2;
        newMsg.data = this.editMenuFromData;
        publishMsg(newMsg);
        this.editConfigDialogVisible = false;
      }
    },
    MenuConfig(val) {
      // this.$router.push('/src/views/bigscreenDesigner/designer/index.vue')
      let routeUrl = this.$router.resolve({
        path: "/bigscreenDesigner",
        query: {
          id: val.id,
        },
      });
      console.log(routeUrl.href);
      window.open(routeUrl.href, "_blank");
    },
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.type == "0") {
        return { backgroundColor: "#66b1ff4d" };
      } else {
        return { backgroundColor: "#cccccc" };
      }
    },
    //跳转监视大屏
    GoMonitor(index) {
      console.log(index);
      let routeUrl = this.$router.resolve({
        path: "/Dashboard",
        query: {
          id: index,
        },
      });
      console.log(routeUrl.href);
      window.open(routeUrl.href, "_blank");
      // this.$router.push({
      //   path: "/DashBoard1",
      //   query: { id: index },
      // });
    },
    onMessage(topic, msg) {
      // this.YgHome.onMessage(topic, msg);
      // console.log("正在监听--System页面数据");
      // console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1022:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.TableList = msg.data;
              let result = msg.data;
              let newArr = this.addMenuFromObj.filter((v) => {
                return v.prop == "parentId";
              });
              let newArr1 = this.editMenuFromObj.filter((v) => {
                return v.prop == "parentId";
              });
              let parentArray = result.filter((item) => {
                return item.type == "0";
              });
              newArr[0].options = [];
              parentArray.map((e) => {
                return newArr[0].options.push({
                  label: e.name,
                  value: e.id,
                });
              });
              newArr1[0].options = [];
              parentArray.map((e) => {
                return newArr1[0].options.push({
                  label: e.name,
                  value: e.id,
                });
              });

              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("添加菜单成功");
                }
              }
              break;
            case 2:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("编辑菜单成功");
                }
              }
              break;
            case 3:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("删除菜单成功");
                }
              }
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //this.Onmessage();
    setMessageCallback(this.onMessage);
    // console.log("系统参数页面请求消息");
    // publishMsg({
    //   webMsgType: 1022,
    //   funCode: 0,
    // });
    this.getMenulist(this.activeName1);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforedestroy() {}, //生命周期 - 销毁完成
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
</style>

</style>